<template>
<div class="wrap">
<xcl-header :page-title="pageTitle" :call-back="payNow" :header-right="headerRight"></xcl-header>

<div class="content" v-for ="p in myOrder" transition="scroll">
	 <div class="list-block" >
	    <ul>
 	      <li class="item-content">
	        <div class="item-inner">
	          <div class="item-title label">订单编号</div>
	          <div class="item-input t2">{{p.sid}}</div>
	        </div>
	      </li>
	      <li class="item-content">
	        <div class="item-inner">
	          <div class="item-title label">订单日期</div>
	          <div class="item-input t2">{{p.ot | getLastTimeStr}}</div>
	        </div>
	      </li>
	      <li class="item-content">
	        <div class="item-inner">
	          <div class="item-title label">产品名称</div>
	          <div class="item-input t2" >{{p.n}}</div>
	        </div>
	      </li>
	      <li class="item-content">
	        <div class="item-inner">
	          <div class="item-title label">策略团队</div>
	          <div class="item-input t2">{{p.tn || '---'}}</div>
	        </div>
	      </li>
	     <li class="item-content">
	        <div class="item-inner">
	          <div class="item-title label">投资经理</div>
	          <div class="item-input t2">{{'---'}}</div>
	        </div>
	      </li>
	      <li class="item-content">
	        <div class="item-inner">
	          <div class="item-title label">申请类型</div>
	          <div class="item-input t2">{{p.t | orderType}}</div>
	        </div>
	      </li>
			<li class="item-content">
	        <div class="item-inner">
	          <div class="item-title label">申请金额</div>
	          <div class="item-input t2">￥ {{(p.i-p.f) | formatMoney}}</div>
	        </div>
	      </li>
			<li class="item-content">
	        <div class="item-inner">
	          <div class="item-title label">购买费用</div>
	          <div class="item-input t2">￥ {{p.f | formatMoney}}</div>
	        </div>
	      </li>
			<li class="item-content">
	        <div class="item-inner">
	          <div class="item-title label">总金额</div>
	          <div class="item-input t2">￥ {{p.i | formatMoney}}</div>
	        </div>
	      </li>
	      <li class="item-content">
	        <div class="item-inner">
	          <div class="item-title label">处理时间</div>
	          <div class="item-input t2" >{{p.et | getLastTimeStr}}</div>
	        </div>
	      </li>
	   <!--    <li class="item-content">
	        <div class="item-inner">
	          <div class="item-title label">确认时间</div>
	          <div class="item-input t2" style="color:#11B864">-0.97</div>
	        </div>
	      </li>
      <li class="item-content">
	        <div class="item-inner">
	          <div class="item-title label">确认金额</div>
	          <div class="item-input t2" style="color:#11B864">-0.97</div>
	        </div>
	      </li>
	      <li class="item-content">
	        <div class="item-inner">
	          <div class="item-title label">确认份额</div>
	          <div class="item-input t2" style="color:#11B864">-0.97</div>
	        </div>
	      </li>
	      <li class="item-content">
	        <div class="item-inner">
	          <div class="item-title label">确认费用</div>
	          <div class="item-input t2" style="color:#11B864">-0.97</div>
	        </div>
	      </li>
	      <li class="item-content">
	        <div class="item-inner">
	          <div class="item-title label">订单状态</div>
	          <div class="item-input t2" style="color:#11B864">-0.97</div>
	        </div>
	      </li>
	      <li class="item-content">
	        <div class="item-inner">
	          <div class="item-title label">付款账户</div>
	          <div class="item-input t2" style="color:#11B864">-0.97</div>
	        </div>
	      </li>-->

	    </ul>
	</div>
	 <div class="list-block" style="margin:0.5rem 0">
	 <div class="row" v-show="cancleOrder"  style="margin:1em;">
	 	<a  @click="doCancleOrder(p.sid)" class="button button-lignt button-fill">取消订单</a>
	 </div>
	 	
	 </div>
</div>

  <xcl-loading :show="loading.show"></xcl-loading>
  <xcl-toast :show="toast.show" :show-content="toast.content"></xcl-toast>
  <xcl-alert :show="alertCom.show" :show-content="alertCom.content" :confirm-fn="alertCom.confirmFn"  :cancle-fn="alertCom.cancleFn" :alert-title="alertCom.title" transition="fade"></xcl-alert>

  </div>
</template>
<script>
import xclHeader from '../components/header.vue'
import xclLoading from '../components/loading.vue'
import xclToast from '../components/xclToast.vue'
import xclAlert from '../components/xclAlert.vue'


let UserProxy =  require("../proxy/user_proxy");
let User = new UserProxy();
let ProductProxy =  require("../proxy/product_proxy");
let Product = new ProductProxy();
  export default {
        data (){
            return {
                scroll:true,
                pageTitle:'订单详情',
                user:{
                	nickName:localStorage.nickName,
                	img:'/src/asserts/images/user.png'
                }, 
                myOrder:[],            
                loading:{
                    show:false
                },
                toast:{
                	show:false,
                	content:''
                },
                alertCom:{
                    show:false,
                    content:'您要取消订单吗？',
                    title:'取消订单',
                    confirmFn:()=>{},
                    cancleFn:()=>{}
                }
            }
        },
        computed:{
        	cancleOrder(){
        			return this.myOrder[0].s != 4 && this.myOrder[0].s != 5;
        	},
        	headerRight(){
        		if(this.myOrder[0]&&this.myOrder[0].s != 4 && this.myOrder[0].s != 5){
        			return '付款';
        		}else{
        			return '';
        		}
        	}
        },
        methods:{
        	payNow(){
        		this.$router.go('/User/MyOrderPayNow');
        	},
        	doCancleOrder(sid){
        		var _this = this;
        		this.alertCom.show = true;
        		this.alertCom.cancleFn = function(){
        		    _this.alertCom.show = false;
        		},
        		this.alertCom.confirmFn = function(){
        		    _this.loading.show = true ;
        		    Product.cancelOrder(localStorage.token,sid,(d)=>{
        		    	if(d.code == 200){
        		    		_this.toast.content='取消成功，跳转中...';
        		    		_this.alertCom.show = false;
        		            _this.alertCom.confirmFn = null;
        		    		setTimeout(()=>{
        		    			_this.toast.show=false;
        		    			_this.$router.go('/User/MyOrder');
        		    		},2600);
        		    	}else if(d.code == 4090){
        		              localStorage.removeItem('token');
        		              _this.$route.go('/Login'); 
        		        }
        		    });
        		}
        		
        	},
        	getMyProducts(){
        		var _this = this;
        		_this.loading.show = true;
        		var orderId = this.$route.params.orderId;
        		Product.getOrder(localStorage.token,orderId,(d)=>{
        			if(d.code == 200 && d.results && d.results.length){
        				_this.myOrder = _this.myOrder.concat(d.results);
        			}else{
        			}
        			_this.loading.show = false;
        		});
        	}
        },
        ready(){
        	this.getMyProducts();
        },
        components:{
           "xclHeader":xclHeader,
           'xclToast':xclToast,      
           "xclLoading":xclLoading,
           "xclAlert":xclAlert
        }
  }
</script>
